<template>
	<view class="detail">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500" height="800rpx">
			<swiper-item v-for="(item,index) in goodsDetail.slider" :key="index" class="slider-item">
				<image :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="detailTitle">

			<view class="row">

				<view class="price">
					<text class="util">¥</text>
					<text>{{goodsDetail.price}}</text>
				</view>
				<text class="old-price">
					¥<text>{{goodsDetail.marketPrice}}</text>
				</text>
				<view class="collection" @click="handleCollectionClick(goodsDetail.id,goodsDetail.isCollected)">
					<text :class="['iconfont',goodsDetail.isCollected?'icon-shoucang':'icon-shoucanged']"></text>
					<view :class="goodsDetail.isCollected?'active':'‘'">收藏</view>
				</view>
			</view>
			<view class="card">{{goodsDetail.name}}</view>
		</view>
		<rich-text :nodes="goodsDetail.detail"></rich-text>
		<uni-goods-nav :options="options" :buttonGroup="buttonGroup" class="bottom-bar" @click="handleCartNavClick"
			@buttonClick="buttonClick"></uni-goods-nav>

	</view>
</template>

<script>
	import goods from '../model.js'
	import {
		getCartList,
		cartAdd
	} from '@/config/api.js'
	export default {
		data() {
			return {
				goodsDetail: {},
				options: [
					// {
					// 	icon: 'headphones',
					// 	text: '客服'
					// }, {
					// 	icon: 'shop',
					// 	text: '店铺',
					// },
					{
						icon: 'cart',
						text: '购物车',
						info: 0
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
			};
		},
		mixins: [goods],
		onLoad(option) {
			const isLogin = this.$store.state.TOKEN.length > 0
			console.log(this.$store.state.TOKEN, "token", isLogin)
			if (isLogin) this.refershCart()
			if (option && option.id) {
				this.getDetail(option.id)
			}
		},
		methods: {
			refershCart() {
				getCartList().then(({
					data
				}) => {
					this.options = this.options.map(item => {
						return {
							...item,
							info: item.text === '购物车' ? item.info + 1 : item.info
						}
					})
					this.options[this.options.length - 1].info = data.length
				})
			},
			handleCartNavClick(e) {
				if (e.content.text === '购物车') this.$tool.pageTo('/pages/cart/cart')
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
			},
			buttonClick(e) {
				if (e.index == 0) {
					//加入购物车
					cartAdd(this.goodsDetail.id, 1).then(res => {
						if (res.status === true) {
							this.refershCart()
							this.$tool.message('加入购物车成功', 2000, 'success')
						}
					})
				}
				if (e.index == 1) {
					//立即购买
					// this.cartAdd(this.goodsDetail.id)
					// console.log('/order/create/create?id='+JSON.stringify([this.goodsDetail.id]),"立即购买");
					
					cartAdd(this.goodsDetail.id, 1).then(res => {
						this.$tool.pageTo('/order/create/create?id='+JSON.stringify([this.goodsDetail.id]))
					})
				}
			},
			handleCollectionClick(id, isCollected) {
				this.handleColled(id, isCollected).then(res => {
					if (res.status === true) {
						this.$tool.message(`${this.goodsDetail.isCollected?"取消":""}收藏成功`)
						this.goodsDetail.isCollected = !this.goodsDetail.isCollected
					}
				})
			},
			async getDetail(id) {
				this.$tool.loading('正在加载数据')
				const {
					data
				} = await this.getGoods(id)
				data.slider = data.slider.split(",")
				this.goodsDetail = data
				this.$tool.hideLoading()
				console.log(data)
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		.bottom-bar {

			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
		}

		.iconfont {
			font-family: "iconfont" !important;
			font-size: 46rpx;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.icon-shoucanged:before {
			content: "\e666";
			color: red;
		}

		.icon-shoucang:before {
			content: "\e8c6";
			color: red;
		}


		.swiper {
			height: 720rpx;

			.slider-item {
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.detailTitle {
			padding: 20rpx;
			background-color: #FFFFFF;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			margin-bottom: 20rpx;

			.row {
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				margin: 0 10rpx;


				.old-price {

					color: #a3a7b4;
					font-size: $size-title;
					text-decoration: line-through;
					display: flex;
					align-items: flex-end;
					margin-left: 20rpx;
				}

				.price {
					padding: 0 0rpx;
					color: red;
					vertical-align: bottom;

					text {
						font-size: 50rpx;
					}

					.util {
						font-size: 30rpx;
					}
				}

				.collection {
					margin-left: auto;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					view {
						font-size: 16rpx;
					}

					.active {
						color: red;
					}
				}
			}
		}
	}
</style>
